<!DOCTYPE html>
<html>
<head>
    <title>Cylindrical Shell Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #999;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters for the drawing
    const y_center = 180;
    const cylinder_length = 250;
    const cylinder_radius = 50;
    const x_start = 100;
    const x_end = x_start + cylinder_length;
    const ellipse_x_radius = 20;

    const y_top = y_center - cylinder_radius;
    const y_bottom = y_center + cylinder_radius;

    // --- Draw Cylinder ---
    ctx.beginPath();
    // Top surface line
    ctx.moveTo(x_start, y_top);
    ctx.lineTo(x_end, y_top);
    // Right end cap (elliptical)
    ctx.ellipse(x_end, y_center, ellipse_x_radius, cylinder_radius, 0, -Math.PI / 2, Math.PI / 2);
    // Bottom surface line
    ctx.lineTo(x_start, y_bottom);
    // Left end cap (elliptical)
    ctx.ellipse(x_start, y_center, ellipse_x_radius, cylinder_radius, 0, Math.PI / 2, -Math.PI / 2);
    ctx.stroke();

    // Draw the visible back edge of the left opening
    ctx.beginPath();
    ctx.ellipse(x_start, y_center, ellipse_x_radius, cylinder_radius, 0, Math.PI / 2, 3 * Math.PI / 2);
    ctx.stroke();

    // --- Draw Central Axis (z-axis) ---
    ctx.font = 'italic 20px Times New Roman';
    // Dashed part inside the cylinder
    ctx.beginPath();
    ctx.setLineDash([7, 5]);
    ctx.moveTo(x_start, y_center);
    ctx.lineTo(x_end, y_center);
    ctx.stroke();

    // Solid part extending to the right
    ctx.beginPath();
    ctx.setLineDash([]);
    ctx.moveTo(x_end, y_center);
    ctx.lineTo(x_end + 60, y_center);
    ctx.stroke();

    // Arrowhead for z-axis
    const z_arrow_x = x_end + 60;
    ctx.beginPath();
    ctx.moveTo(z_arrow_x, y_center);
    ctx.lineTo(z_arrow_x - 12, y_center - 6);
    ctx.moveTo(z_arrow_x, y_center);
    ctx.lineTo(z_arrow_x - 12, y_center + 6);
    ctx.stroke();
    ctx.fillText('z', z_arrow_x + 15, y_center);

    // --- Draw Dimensions ---
    // Dimension for length 'l'
    const l_dim_y = y_bottom + 40;
    ctx.beginPath();
    ctx.moveTo(x_start, l_dim_y - 5);
    ctx.lineTo(x_start, l_dim_y + 5);
    ctx.moveTo(x_end, l_dim_y - 5);
    ctx.lineTo(x_end, l_dim_y + 5);
    ctx.moveTo(x_start, l_dim_y);
    ctx.lineTo(x_end, l_dim_y);
    ctx.stroke();
    ctx.fillText('l', (x_start + x_end) / 2, l_dim_y + 20);

    // Dimension for radius 'a'
    const a_dim_x = 50;
    ctx.beginPath();
    // Vertical line for diameter
    ctx.moveTo(a_dim_x, y_top);
    ctx.lineTo(a_dim_x, y_bottom);
    // T-bar at the top
    ctx.moveTo(a_dim_x - 6, y_top);
    ctx.lineTo(a_dim_x + 6, y_top);
    // T-bar at the bottom
    ctx.moveTo(a_dim_x - 6, y_bottom);
    ctx.lineTo(a_dim_x + 6, y_bottom);
    // Cross-bar at the center
    ctx.moveTo(a_dim_x - 6, y_center);
    ctx.lineTo(a_dim_x + 6, y_center);
    ctx.stroke();
    // Label for radius 'a'
    ctx.fillText('a', a_dim_x - 25, y_center - cylinder_radius / 2);

    // --- Draw Rotation Arrow and Label 'ω' ---
    const omega_x_rad = 18;
    const omega_y_rad = cylinder_radius + 5;
    const startAngleOmega = 0.6 * Math.PI;
    const endAngleOmega = 1.7 * Math.PI;

    // The curved arrow
    ctx.beginPath();
    ctx.ellipse(x_end, y_center, omega_x_rad, omega_y_rad, 0, startAngleOmega, endAngleOmega);
    ctx.stroke();

    // Arrowhead for the rotation arrow
    const arrow_x = x_end + omega_x_rad * Math.cos(endAngleOmega);
    const arrow_y = y_center + omega_y_rad * Math.sin(endAngleOmega);
    ctx.beginPath();
    ctx.moveTo(arrow_x, arrow_y);
    ctx.lineTo(arrow_x + 9, arrow_y - 3);
    ctx.moveTo(arrow_x, arrow_y);
    ctx.lineTo(arrow_x + 3, arrow_y + 9);
    ctx.stroke();

    // Label 'ω'
    ctx.fillText('ω', x_end + omega_x_rad + 20, y_center);

    // --- Draw Caption ---
    ctx.font = 'bold 20px Times New Roman';
    ctx.fillText('Fig. 2.14', canvas.width / 2, canvas.height - 25);

</script>
</body>
</html>